<template>
	<view class="page">
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map :latitude="latitude" enable-3D="true" :longitude="longitude" scale="18" :markers="markers" :controls="controls" @controltap="click">
				</map>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 23.451398,
				longitude: 113.490827,
				iconPath: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',
				markers: [],
				// 我的位置信息
				onself: {
					lat: 23.451398,
					lng: 113.490827,
					name: '救援队员',
				},
				// 按钮图标
				controls: [{
					id: 1,
					iconPath: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png',
					clickable: true,
					position: {
						width: 20
					}
				}],
				// 队友位置信息
				info: {}
			}
		},
		onLoad() {
			console.log(this.$store.state.userInfo)
			this.markers = [{
				width: 20,
				latitude: this.onself.lat,
				longitude: this.onself.lng,
				iconPath: this.iconPath,
				callout: {
					content: this.onself.name,
					display: 'ALWAYS'
				},
			}]
			this.getPositions()
		},
		methods: {
			click(e) {
				this.setMarkers(Object.values(this.info))
			},
			
			getPositions() {
				setInterval(() => {
					const position = JSON.parse(uni.getStorageSync('position') || "{}");
					if (!!Object.keys(position).length) {
						this.info[position.clientId] = position;
						console.log(this.info)
						this.setMarkers(Object.values(this.info))
						uni.removeStorageSync("position")
					}
				}, 1000)
			},
			
			setMarkers(info) {
				let markers = info.map(item => {
					return {
						width: 20,
						latitude: item.lat,
						longitude: item.lng,
						iconPath: this.iconPath,
						callout: {
							content: item.name,
							display: 'ALWAYS'
						},
					}
				});

				markers.push({
					width: 20,
					latitude: this.onself.lat,
					longitude: this.onself.lng,
					iconPath: this.iconPath,
					callout: {
						content: this.onself.name,
						display: 'ALWAYS'
					},
				})
				this.markers = markers
			}	
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100%;

		.page-body {
			height: 100%;

			.page-section {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;

				map {
					width: 100%;
					height: 100vh;
				}
			}
		}
	}
</style>
